
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'
import { setNum, setSong, playSong, songingFlag } from '../../store/actions'
import utils from '../../utils/index'
import { playlistDetail, songDetail } from './server.js'
import './index.scss'
function Detail() {
  const history = useHistory()
  const dispatch = useDispatch()
  const [data, setData] = useState({})
  const [songData, setSongData] = useState({})
  const [bg, setBg] = useState('')
  // const Song
  useEffect(() => {
    console.log(utils.getUrlName('id'))
    const create = async () => {
      const data = await playlistDetail({ id: utils.getUrlName('id') })
      const songData = await songDetail({ ids: data.playlist.trackIds.map((item) => {
        return item.id
      }).join() })
      setData(data)
      setSongData(songData)
      setBg(data.playlist.coverImgUrl)
    }
    create()
  },[])
  const Song = useSelector(state => state.reducer.playSong)
    console.log(Song)
  const [songing, setSonging] = useState(null)
  useEffect(() => {
    // console.log(Song)
    setSonging(Song)
  }, [Song])
  const back = () => {
    history.go(-1)
  }
  // const store = () => {
  //   dispatch(setNum(2))
  // }
  const paly = (item) => {
    dispatch(setSong(songData.songs))
    dispatch(playSong(item))
    // console.log(Song, item)
  }
  return (
    <div className="detail">
      <div className="detail-bg" style={{backgroundImage: `url(${bg})`}} />
      <div className="detail-head ali-c">
        <div onClick={() => back()} className="iconfont icon-zuogengduofanhuiback"></div>
        <div>{data.playlist && data.playlist.name}</div>
      </div>
      <div className="detail-bg-header flex">
        <div className="detail-bg-header-img"><img src={bg} alt="" /></div>
        <div className="detail-bg-header-main">
          <div className="detail-bg-header-main-title">{data.playlist && data.playlist.name}</div>
          <div className="ali-c detail-bg-header-main-ava">
            <img src={data.playlist && data.playlist.creator.avatarUrl} alt="" />
            <span>{ data.playlist && data.playlist.creator.nickname }</span>
          </div>
        </div>
      </div>
      <ul className="detail-bg-header-main-ul">
        { songData.songs && songData.songs.map((item, index) => {
          return <li className="detail-bg-header-main-ul-li ali-c"  key={index} onClick={() => {paly(item)}}>
            <div className="detail-bg-header-main-ul-li-index" style={{color: `${ Song && item.id === Song.id ? 'red' : ''}`}}>{ index + 1 }</div>
            <div className="detail-bg-headebr-main-ul-li-title flex flexv" >
              <span className="oneline" style={{color: `${ Song && item.id === Song.id ? 'rgb(229, 71, 60)' : ''}`}}>{ item.name } {item.alia[0] ? `(${item.alia[0]})` : ''}</span>
              <span className="oneline" style={{color: `${ Song && item.id === Song.id ? 'rgb(229, 71, 60)' : ''}`}}>{item.ar[0].name} - { item.al.name}</span>
            </div>
          </li>
        })}
      </ul>
    </div>
  )
}

export default Detail